<template>
  <div class="level-dialog">
    <transition name="fade">
      <div class="lay-mask"
           v-show="visible"
           @click="closeDialog()"></div>
    </transition>
    <transition
      @beforeEnter="beforeEnter"
      name="fade">
      <div class="lay-box tc"
           v-show="visible"
           :style="{'margin-top': -content.height/2 + 15 + 'px','margin-left': -content.width/2 + 'px'}"
           ref="layBox">
        <p class="lay-close" @click="closeDialog()"></p>
        <div class="lay-bg" :class="{'lay-bg-wp': data.prizetype==='3'}">
          <p class="tit" v-if="data.prizelevel">{{data.prizelevel}}等奖</p>
          <p>{{data.msg}}</p>
          <p class="no-tips" v-if="data.title">{{data.title}}</p>
          <p v-if="data.bigimg"><img :src="baseurl + data.bigimg" alt=""></p>
          <button v-if="data.prizetype === '1'" @click="getPrizeBtn(data.link)" class="btn">立即领取 </button>
          <button v-if="data.prizetype === '2'" @click="getHongbao()" class="btn">确定</button>
          <p v-if="data.prizetype === '1'" v-html="data.prizetext"></p>
        </div>
        <div class="form-list" v-if="data.prizetype === '3'">
          <p class="top-tips">*填写以下信息领取奖品</p>
          <div class="form-item" v-if="data.prizeid === '88'">
            <label class="lab">选择版本：</label>
            <select v-model="formPar.category" class="form-control" name="selectVersion">
              <option value="-1">请选择</option>
              <option value="1">普通生</option>
              <option value="2">艺考生</option>
            </select>
          </div>
          <div class="form-item" v-if="data.prizeid === '90'">
            <label class="lab">选择版本：</label>
            <select v-model="formPar.kldm" class="form-control" name="selectVersion">
              <option value="-1">请选择</option>
              <option value="1">文科</option>
              <option value="5">理科</option>
            </select>
          </div>
          <div class="form-item" v-if="data.prizeid === '90'">
            <label class="lab">选择科目：</label>
            <select v-model="formPar.subject" class="form-control" name="selectVersion">
              <option v-for="item in subjectSelect" :value="item.value" :disabled="item.value===-1">{{item.name}}</option>
            </select>
          </div>

          <!--<div class="form-item">
            <label class="lab">所在地区：</label>
            <label>
              <select class="form-control" name="selectAddress">
                <option>请选择</option>
                <option>河南省</option>
                <option>北京市</option>
                <option>天津市</option>
                <option>上海市</option>
                <option>重庆市</option>
                <option>河北省</option>
                <option>山西省</option>
                <option>辽宁省</option>
                <option>吉林省</option>
                <option>黑龙江省</option>
              </select>
            </label>
          </div>-->
          <div class="form-item">
            <transition name="fade">
              <choose-area @getLinkage='_showChildMsg' v-show="showLinkage"></choose-area>
            </transition>
            <label class="lab">所在地区：</label>
            <label @click="_showLinkage" class="get-city">
              <select name="sesectArea" class="form-control" disabled>
                <option value="-1" selected>{{result}}</option>
              </select>
              <p class="block-p"></p>
              <!--<p v-html="result" class="get-city form-control" @click="_showLinkage"></p>-->
            </label>
          </div>

          <div class="form-item">
            <label class="lab" style="vertical-align:top">邮寄地址：</label>
            <label>
              <textarea v-model="formPar.linkaddress" class="form-control" placeholder="请输入你的详细地址" name="address" id="address" rows="2"></textarea>
            </label>
          </div>

          <div class="form-item">
            <label class="lab">收货人：</label>
            <label>
              <input v-model="formPar.linkuser" class="form-control" type="text" name="consignee" id="consignee" placeholder="请输入姓名" />
            </label>
          </div>

          <div class="form-item">
            <label class="lab">联系电话：</label>
            <label>
              <input v-model="formPar.linkphone" class="form-control" type="tel" name="phoneNumber" id="phone" placeholder="请输入联系电话" />
            </label>
          </div>
          <div class="form-item tc pt10">
            <button class="btn" @click="submitForm()">提交</button>
          </div>
        </div>
      </div>
    </transition>
    <result-dialog :visible.sync="isShowResult" :type="type"></result-dialog>
  </div>
</template>

<script>
  import base from '../baseurl'
  import ChooseArea from './choose_area'
  import ResultDialog from './result_dialog'
  export default {
    name: 'result_dialog',
    data () {
      return {
        isShowResult: false,
        type: '', // 结果弹框类型（领取成功，次数不够，提交成功）
        content: {},
        subjectSelect: [
          {
            value: -1,
            name: '请选择'
          },
          {
            value: 1,
            name: '语文'
          },
          {
            value: 2,
            name: '数学'
          },
          {
            value: 3,
            name: '英语'
          },
          {
            value: 4,
            name: '政治'
          },
          {
            value: 5,
            name: '历史'
          },
          {
            value: 6,
            name: '地理'
          },
          {
            value: 7,
            name: '物理'
          },
          {
            value: 8,
            name: '化学'
          },
          {
            value: 9,
            name: '生物'
          }
        ],
        baseurl: base.BASE,
        formPar: {
          type: 1,
          subject: '-1',
          category: '-1',
          kldm: '-1',
          provinceid: '',
          cityid: '',
          countyid: '',
          linkaddress: '',
          linkuser: '',
          linkphone: ''
        },
        showLinkage: false, // 控制子组件的显示隐藏
        result: '请选择'
      }
    },
    components: {
      ChooseArea,
      ResultDialog
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      data: {
        required: true
      }
    },
    watch: {
      'visible': function () {
        this.bodyOverflow()
      }
    },
    computed: {
      // comData () {
      //   // 90高考45套   88 志愿卡
      //   // "prizetype" 奖品类型: 1电子券类2红包类3图书类4惠顾类（空奖）
      //   this.data.prizetype = 3
      //
      //   return this.data
      // }
    },
    methods: {
      _showChildMsg (msg) { // 接收子组件数据
        this.result = msg.name
        this.formPar.provinceid = msg.provinceId
        this.formPar.cityid = msg.cityId
        this.formPar.countyid = msg.areaId
        this.showLinkage = false
      },
      _showLinkage () {
        this.showLinkage = true
      },
      getHongbao () {
        let _this = this
        _this.$Indicator.open()
        $.post(_this.baseurl + 'lotterynew.php?lid=13&action=linkinfo', {
          prizeid: _this.data.prizeid,
          id: _this.data.drawid
        }, function (data) {
          _this.$Indicator.close()
          if (data.type) {
            _this.type = 'get'
            _this.isShowResult = true
            this.closeDialog()
          } else {
            _this.$Toast(data.msg)
          }
        }, 'json')
      },
      getPrizeBtn (link) {
        this.closeDialog()
        window.location.href = link
      },
      submitForm () {
        let _this = this
        let par = _this.formPar
        let prizeid = _this.data.prizeid
        let tag = true
        if (prizeid === '88') {
          delete par.kldm
          delete par.subject
        } else if (prizeid === '90') {
          delete par.category
        }
        _.forEach(par, (item) => {
          if (!item && item !== '-1') {
            tag = false
          }
        })
        console.log(tag)
        if (tag) {
          _this.$Indicator.open()
          console.log(par)
          $.post(_this.baseurl + 'lotterynew.php?lid=13&action=prizeinfo', par, function (data) {
            console.log(data)
            _this.$Indicator.close()
            if (data.type) {
              // 弹出提交成功弹框
              _this.type = 'submit'
              _this.isShowResult = true
              console.log('提交成功')
            } else {
              _this.$Toast(data.msg)
            }
          }, 'json')
        } else {
          _this.$Toast('请完善奖品领取信息')
        }
      },
      beforeEnter () {
        this.updatePosition()
      },
      updatePosition () {
        if (this.showFlag || this.isTransed) return
        this.$nextTick(() => {
          this.showFlag = true
          this.isTransed = true
          // 计算宽高 修补定位到中心
          let _layBox = $(this.$refs.layBox)
          this.$set(this.$data, 'content', {
            width: _layBox.outerWidth(true),
            height: _layBox.outerHeight(true)
          })
        })
      },
      closeDialog () {
        this.$emit('update:visible', false)
      },
      bodyOverflow () {
        if (this.visible) {
          $('body').css('overflow', 'hidden')
        } else {
          $('body').css('overflow', 'auto')
        }
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .level-dialog{
    .lay-mask {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 999;
      background-color: rgba(0,0,0,.65);
    }
    .lay-box {
      width: 90%;
      max-width: 360px;
      height: auto;
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 1000;
      border-radius: 10px;
      .lay-close{
        position:absolute;
        right:15px;
        top:15px;
        width:20px;
        height:20px;
        background:url("../assets/imgs/close_white.png");
        background-size:contain;
        }
      .lay-bg{
        background:url("../assets/imgs/prize_bg.png") no-repeat center;
        background-size:cover;
        padding:40px 15px;
        color:#F45502;
        .tit{
          font-size:20px;
          margin-bottom:5px;
          }
        .no-tips{
          margin: 10px 0;
          font-size:16px;
          }
        img{
          width:45%;
          margin: 30px 0;
          }
        }
      .lay-bg-wp{
        padding: 20px 15px 5px;
        img{
          width:38%;
          margin:5px 0 0;
          }
        }
    }
  }
  .btn{
    font-family:'Microsoft yahei',serif ;
    background:#F56006;
    color:#FFF03A;
    border:none;
    border-radius:30px;
    text-align:center;
    padding:10px 50px;
    font-size:17px;
    margin-bottom:10px;
    outline:none;
    }
  //表单
  .form-list {
    background-color: #fff;
    padding: 10px 15px;
    text-align:left;
    .lab{
      width:70px;
      display:inline-block;
      text-align:right;
      vertical-align:middle;
      color:#979290;
      }
    .form-control {
      font-size: 14px;
      line-height: 1.4;
      width: calc(100% - 72px);
      box-sizing: border-box;
      background-color: #F0EBE9;
      border: 1px solid #F0EBE9;
      border-radius: 4px;
      padding: 0.5em;
      color:#979290;
      resize:none;
      font-family:'Microsoft yahei', serif;
      }
    .get-city{
      width: calc(100% - 72px);
      display:inline-block;
      position:relative;
      .form-control{
        width:100%;
        }
      .block-p{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        }
      }
    select.form-control {
      height: 36px;
      padding-top: 0;
      padding-bottom: 0.1em;
      }
    .top-tips {
      font-size: 12px;
      color: #bab1b1;
      margin: 3px 0;
      }
    .form-item {
      padding: 5px 0;
      .btn{
        background:#FCCD02;
        color:#C90B08;
        padding: 10px 80px;
        }
      }
    }
</style>
